<script setup lang="ts">
import useAppStore from '../../../store/modules/app';

interface IProps {
  bgColor: string;
  beeperId: number;
  beeperList: IGetCallListRes[];
  isSafeDistance?: boolean;
}

type EmitEvents = {
  (event: 'selected', payload: { id: number; mainFlag?: number }): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
const store = useAppStore();
const state = reactive({ show: false, searchText: '', recordBeeperId: props.beeperId });

watch(
  () => props.beeperId,
  (beeperId) => {
    if (beeperId && beeperId > 0) state.recordBeeperId = beeperId;
  },
);

// 控制顶部显示一个呼叫器为哪一个
const filterRenderBeeperList = computed(() => {
  if (props.beeperList.some((item) => item.id === props.beeperId)) {
    return props.beeperList.filter((item) => item.id === props.beeperId);
  } else {
    if (state.recordBeeperId > 0) {
      return props.beeperList.filter((item) => item.id === state.recordBeeperId);
    } else {
      return props.beeperList.slice(0, 1);
    }
  }
});

// 搜索呼叫器渲染列表
const searchRenderBeeperList = computed(() => {
  if (state.searchText) {
    return props.beeperList.filter((item) => item.name.toLowerCase().includes(state.searchText));
  } else {
    return props.beeperList;
  }
});

// 搜索呼叫器点击
const handleSearchBeeperClick = (id: number, mainFlag?: number) => {
  state.show = false;
  emits('selected', { id, mainFlag });
};
</script>

<template>
  <view
    class="px-[12px] flex justify-between"
    :style="{
      paddingTop: !isSafeDistance && `${store.$state.menuInfo.top}px`,
      height: store.$state.menuInfo.height + 'px',
      background: props.bgColor || '#ffc300',
      paddingRight: !isSafeDistance ? store.$state.menuInfo.width + 12 + 'px' : 12 + 'px',
      paddingBottom: !isSafeDistance ? 8 + 'px' : 0,
    }"
  >
    <view class="flex" style="width: calc(100% - 35px)" v-if="props.beeperList.length === 0">
      <view class="bg-[#ea622c] text-[white] c-br flex justify-center items-center mr-[8px] min-w-[50px]" @click="emits('selected', { id: -1 })">周边</view>
    </view>
    <view class="flex" style="width: calc(100% - 35px)" v-else>
      <view class="bg-[white] c-br flex justify-center items-center mr-[8px] min-w-[50px]" :style="{ color: beeperId === -1 ? 'white' : '', background: beeperId === -1 ? '#ea622c' : '' }" @click="emits('selected', { id: -1 })"> 周边</view>
      <view
        class="bg-[white] c-br p-[8px] flex justify-center items-center"
        :style="{ color: beeperId === item.id ? 'white' : '', background: beeperId === item.id ? '#ea622c' : '', maxWidth: 'calc(100% - 80px)' }"
        v-for="item in filterRenderBeeperList"
        :key="item.id"
        @click="emits('selected', { id: item.id, mainFlag: item.mainFlag })"
      >
        <text class="c-text-ellipsis">{{ item.name }}</text>
      </view>
    </view>
    <view v-if="props.beeperList.length > 1" class="w-[30px] h-[30px] rounded-[50%] bg-[white] flex justify-center items-center" @click="state.show = true">
      <i class="i-tabler:list-search text-[16px] c-color-sec"></i>
    </view>
    <van-popup :show="state.show" round position="bottom" @close="state.show = false">
      <view class="bg-white">
        <van-search shape="round" placeholder="请输入搜索关键词" @change="state.searchText = $event.detail" />
        <view class="min-h-[20vh] max-h-[50vh] c-pd">
          <view v-for="item in searchRenderBeeperList" :key="item.id" @click="handleSearchBeeperClick(item.id)">
            <view class="flex justify-between items-center">
              <text class="text-[16px]" :class="item.id === beeperId ? 'c-color-sec' : ''">{{ item.name }}</text>
              <i v-if="item.id === beeperId" class="i-ep:select c-color-sec" />
            </view>
            <van-divider />
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>
